<template>
  <div class="login-container">
    <div class="login-header"
         :style="{backgroundImage:`url(${loginBg})`}">
      <img :src="logo"
           alt=""
           class="login-logo">
    </div>
    <div class="login-wepper">
      <p class="login-link"></p>
      <div class="login-btn">
        <!-- <router-link :to="{path:'/user/reg'}">
          <van-button type="primary">注册</van-button>
        </router-link> -->
        <router-link :to="{path:'/user/login'}">
          <van-button type="primary">登录</van-button>
        </router-link>
        <router-link :to="{path:'/user/login'}">
          <van-button>注册</van-button>
        </router-link>
      </div>
    </div>
    <!-- <div class="wei-footer">
      <login-footer></login-footer>
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import loginCommon from './login/mixins/common.js';
import loginBg from '@/assets/img/loginBg.png';
import logo from '@/assets/img/logo.png';
import baseCommon from '@/mixins/common.js'
  ;

export default {
  name: 'login',
  mixins: [baseCommon({ status: 1 }), loginCommon()],
  data() {
    return {
      logo,
      loginBg,
    };
  },
  mounted() { },
  computed: {
    ...mapGetters(['minHeight']),
  },
};
</script>

<style lang="scss">
@import './login/css/login.scss';
.login-container {
  height: 100%;
  background-color: #fff;
}
.login-header {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 375px;
  overflow: hidden;
}
.login-logo {
  margin: 49px 0 0 30px;
  width: 167px;
  height: 45px;
}
.login-wepper {
  background-color: #fff;
}
.login-link {
  font-size: 14px;
  padding: 30px 0 20px 16px;
  color: #58c474;
  font-weight: 500;
}
.login-btn {
  padding: 0 15px;
  .van-button {
    width: 100%;
    margin-bottom: 21px;
    border-radius: 40px;
  }
  .login-submit {
    border-width: 1px;
    border-style: solid;
    border-color: #58c474;
    color: #58c474;
  }
}
</style>

